<template>
    <form-container :width="700" :visible="visible" :destroy-on-close="true" @close="onClose">
        <a-form ref="formRef" :model="formState" :rules="formRules" layout="vertical">
            <a-form-item label="维修编码：" name="code">
                <a-input v-model:value="formState.code" placeholder="请输入维修编码" allow-clear />
            </a-form-item>
        </a-form>
  
        <a-form ref="formRef" :model="formState" :rules="formRules" layout="vertical">
            <a-form-item label="维修名称：" name="name">
                <a-input v-model:value="formState.name" placeholder="请输入维修名称" allow-clear />
            </a-form-item>
        </a-form>
  
        <a-form ref="formRef" :model="formState" :rules="formRules" layout="vertical">
            <a-form-item label="维修备注：" name="description">
                <a-input v-model:value="formState.description" placeholder="请输入维修备注" allow-clear />
            </a-form-item>
        </a-form>
  
        <template #footer>
            <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
            <a-button type="primary" :loading="submitLoading" @click="onSubmit">保存</a-button>
        </template>
    </form-container>
  </template>
  
  <script setup name="updatePassword">
  import { required } from '@/utils/formRules'
  import repairMethodApi from '@/api/repairMethods/repairMethodApi.js'
  
  // 定义emit事件
  const emit = defineEmits({ successful: null })
  // 默认是关闭状态
  let visible = ref(false)
  const formRef = ref()
  // 表单数据
  const formState = ref({})
  const submitLoading = ref(false)
  
  // 打开抽屉
  const onOpen = (email) => {
    visible.value = true
    formState.value = email
  }
  // 关闭抽屉
  const onClose = () => {
    visible.value = false
  }
  // 默认要校验的
  const rules = {
    code: [required('请输入编号')],
    name: [required('请输入名称')],
    description: [required('请输入维修备注')],
   
  }
  
  // 提交数据
  const onSubmit = async () => {
    formRef.value.validateFields().then(() => {
        submitLoading.value = true
        let fromData = {
            id: formState.value.id,
            code: formState.value.code,
            name: formState.value.name,
            description: formState.value.description,
      
        }
        // 提交数据
        repairMethodApi
            .repairMethodsDetail(fromData)
            .then(() => {
                formRef.value.resetFields()
                visible.value = false
                emit('successful', fromData)
            })
            .finally(() => {
                submitLoading.value = false
                callback() //调用组件中的回调方法
            })
    })
  }
  // 调用这个函数将子组件的一些数据和方法暴露出去
  defineExpose({
    onOpen
  })
  </script>
  
  <style scoped></style>